<!--
 * @Autor: Hongting Yuan
 * @Date: 2021-11-30 17:12:00
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 12:52:28
 * @Description: file content
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\components\log\operLog.vue
-->

<template>
  <div>
    <el-card
      style="width: 100%;height: 100%"
    >
      <div class="block">
        <!-- 时间搜索框 -->
        <el-date-picker
          v-model="value"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="left"
          style="margin-bottom: 15px;"
          @change="loginTimeChange()"
        />
        <!-- 导出信息 -->
        <download-excel :data="tableData" :fields="excelFields" style="display: inline; margin-left: 10px">
          <el-button type="primary" style="float: right;margin-bottom: 15px;" icon="el-icon-download">导出信息</el-button>
        </download-excel>
      </div>
      <!-- 导出信息 -->
      <!-- <download-excel :data="tableData" :fields="excelFields" style="display: inline; margin-left: 10px">
        <el-button v-preventReClick="3000" type="primary" style="float: right;margin-bottom: 15px;" icon="el-icon-download">导出信息</el-button>
      </download-excel> -->
      <!-- 展示操作日志 -->
      <el-table
        :data="tableData"
        border
        stripe
        :default-sort="{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          label="#"
          type="index"
        />
        <el-table-column
          label="操作时间"
          prop="operationTime"
          sortable
        />
        <el-table-column
          label="操作描述"
          prop="describe"
          width="200px"
        />
        <el-table-column
          label="参数类型"
          prop="parameterTypes"
          width="300px"
        />
        <el-table-column
          label="请求Url"
          prop="requestUrl"
          width="400px"
        />
        <el-table-column
          label="操作"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="text-align: right;"
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Operlog',
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三天',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      value: '',
      // 将表格中的信息导出为Excel的文件头
      excelFields: {
        '操作时间': 'operationTime',
        '操作描述': 'describe',
        '请求Url': 'requestUrl',
        '参数类型': 'parameterTypes'
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    /**
     * @description: 获取操作日志信息，初始化操作日志数据
     * @param {*}
     * @return {*}
     * @author: Hongting Yuan
     */
    init() {
      axios.get(`/log/getOperationLog?pageNum=${this.currentPage}&pageSize=${this.pageSize}`)
        .then(res => {
          // console.log(res)
          this.tableData = res.data.data.list
          this.totalNum = res.data.data.total
          for (let index = 0; index < this.tableData.length; index++) {
            this.tableData[index].operationTime = this.getdata(this.tableData[index].operationTime)
          }
        })
        .catch(err => {
          console.error(err)
        })
    },
    /**
     * @description: 将时间戳转为2021-11-07 21:31:13格式
     * @param {*} data
     * @return {*}
     * @author: Hongting Yuan
     */
    getdata(data) {
      var date = new Date(data)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    /**
     * @description: 删除日志
     * @param {*} row
     * @return {*}
     * @author: Hongting Yuan
     */
    handleDelete(row) {
      this.$confirm('此操作将永久删除该条日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.post('/log/deleteOperationLog', {
          logList: [
            {
              logTime: row.operationTime
            }
          ]
        })
          .then(res => {
            this.init()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(err => {
            console.error(err)
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    /**
     * @description: 按时间搜索
     * @param {*}
     * @return {*}
     * @author: Hongting Yuan
     */
    loginTimeChange() {
      if (!this.value) {
        this.currentPage = 1
        this.pageSize = 10
        this.init()
      } else {
        axios.post('/log/searchByTime/operationLog', {
          'startTime': this.value[0],
          'endTime': this.value[1],
          'pageNum': this.currentPage,
          'pageSize': this.pageSize
        })
          .then(res => {
            // console.log(res)
            this.tableData = res.data.data.list
            this.totalNum = res.data.data.total
            for (let index = 0; index < this.tableData.length; index++) {
              this.tableData[index].operationTime = this.getdata(this.tableData[index].operationTime)
            }
          })
          .catch(err => {
            console.error(err)
          })
      }
    },
    /**
     * @description: 页面展示数据条数发生变化
     * @param {*} val
     * @return {*}
     * @author: Hongting Yuan
     */
    handleSizeChange(val) {
      this.pageSize = val
      // this.init()
      if (this.value) {
        this.loginTimeChange()
      } else {
        this.init()
      }
    },
    /**
     * @description: 当前显示页发生变化
     * @param {*} val
     * @return {*}
     * @author: Hongting Yuan
     */
    handleCurrentChange(val) {
      this.currentPage = val
      // this.init()
      if (this.value) {
        this.loginTimeChange()
      } else {
        this.init()
      }
    }
  }
}
</script>
  <style lang="scss">

  </style>

